<template>
  <div class="fixed-top border a1">
    <draggable :group="group" v-model="arr">
      <div class="border" v-for="(v, i) in arr" :key="i">
        {{ v.type ? "子组件" : "兄弟组件" }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
const name = ["代办事项", "我的收藏", "通知公告", "全部功能"];
export default {
  props: ["group"],
  components: {
    draggable,
  },
  data() {
    const arr = [];
    name.forEach((v) => {
      v.push({
        name: v,
        type: true,
      });
      v.push({
        name: v,
        type: false,
      });
    });
    return {
      arr,
    };
  },
  watch: {
    arr(v) {
      if (v.length === 1) {
        if (v[0].type) {
          this.arr.push({ name: "a1", type: false });
        } else {
          this.arr.push({ name: "a1", type: true });
        }
      }
      if (v.length === 3) {
        this.arr = [
          {
            name: "a1",
            type: false,
          },
          {
            name: "a1",
            type: true,
          },
        ];
      }
    },
  },
};
</script>


<style scoped>
.a1 {
  width: 200px;
}
</style>